<template>
  <view class="order-list-container">
    <view class="order-list">
      <view class="order-item card" v-for="order in orderList" :key="order.id">
        <view class="order-header">
          <text class="order-title">{{ order.title }}</text>
          <u-tag :text="order.status" :type="getStatusType(order.status)" size="mini"></u-tag>
        </view>
        <view class="order-info">
          <text>教员：{{ order.teacherName }}</text>
          <text>科目：{{ order.subject }}</text>
          <text>时薪：¥{{ order.hourlyRate }}/时</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          id: 1,
          title: '数学辅导订单',
          teacherName: '张老师',
          subject: '数学',
          hourlyRate: 120,
          status: '进行中'
        }
      ]
    }
  },
  methods: {
    getStatusType(status) {
      const typeMap = {
        '待支付': 'warning',
        '进行中': 'primary',
        '已完成': 'success',
        '已取消': 'error'
      }
      return typeMap[status] || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.order-list {
  padding: 0 30rpx;
  
  .order-item {
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .order-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .order-info {
      font-size: 26rpx;
      color: #666;
      
      text {
        display: block;
        margin-bottom: 5rpx;
      }
    }
  }
}
</style> 